
package com.micmac.customer.region_map
{
	import flash.display.Graphics;
	import flash.geom.Rectangle;
	import flash.text.TextFormat;
	
	import mx.core.FlexGlobals;
	import mx.core.UIComponent;
	import mx.core.UITextField;
	import mx.core.mx_internal;
	import mx.styles.CSSStyleDeclaration;
	import mx.styles.IStyleManager;
	import mx.styles.StyleManager;
	
	use namespace mx_internal;
	
	[Style(name="upSkin", type="Class", inherit="no")]
	
	[Style(name="overSkin", type="Class", inherit="no")]
	
	[Style(name="downSkin", type="Class", inherit="no")]
	
	[Style(name="dragDropedSkin", type="Class", inherit="no")]
	/**
	 *  Thickness of the outline of each area.
	 *
	 *  @default 1
	 */
	[Style(name="outlineThickness", type="Number", format="Length", inherit="no")]
	
	/**
	 *  Color of the outline of each area.
	 *
	 *  @default 0xff0000
	 */
	[Style(name="outlineColor", type="uint", format="Color", inherit="no")]
	
	/**
	 *  Alpha transparency of the outline of each area. Default is 0 so the outlines are invisible.
	 *
	 *  @default 0
	 */
	[Style(name="outlineAlpha", type="Number", format="Length", inherit="no")]
	
	/**
	 *  Fill color of each area.
	 *
	 *  @default 0xff0000
	 */
	[Style(name="fillColor", type="uint", format="Color", inherit="no")]
	
	/**
	 *  Alpha transparency of the fill of each area. Default is 0 so the areas are invisible.
	 *
	 *  @default 0
	 */
	[Style(name="fillAlpha", type="Number", format="Length", inherit="no")]

	///************************************************************************************************8
	/**
	 *  Thickness of the outline of each area.
	 *
	 *  @default 1
	 */
	[Style(name="overOutlineThickness", type="Number", format="Length", inherit="no")]
	
	/**
	 *  Color of the outline of each area.
	 *
	 *  @default 0xff0000
	 */
	[Style(name="overOutlineColor", type="uint", format="Color", inherit="no")]
	
	/**
	 *  Alpha transparency of the outline of each area. Default is 0 so the outlines are invisible.
	 *
	 *  @default 0
	 */
	[Style(name="overOutlineAlpha", type="Number", format="Length", inherit="no")]
	
	/**
	 *  Fill color of each area.
	 *
	 *  @default 0xff0000
	 */
	[Style(name="overFillColor", type="uint", format="Color", inherit="no")]
	
	/**
	 *  Alpha transparency of the fill of each area. Default is 0 so the areas are invisible.
	 *
	 *  @default 0
	 */
	[Style(name="overFillAlpha", type="Number", format="Length", inherit="no")]
	///************************************************************************************************8
	/**
	 *  Thickness of the outline of each area.
	 *
	 *  @default 1
	 */
	[Style(name="downOutlineThickness", type="Number", format="Length", inherit="no")]
	
	/**
	 *  Color of the outline of each area.
	 *
	 *  @default 0xff0000
	 */
	[Style(name="downOutlineColor", type="uint", format="Color", inherit="no")]
	
	/**
	 *  Alpha transparency of the outline of each area. Default is 0 so the outlines are invisible.
	 *
	 *  @default 0
	 */
	[Style(name="downOutlineAlpha", type="Number", format="Length", inherit="no")]
	
	/**
	 *  Fill color of each area.
	 *
	 *  @default 0xff0000
	 */
	[Style(name="downFillColor", type="uint", format="Color", inherit="no")]
	
	/**
	 *  Alpha transparency of the fill of each area. Default is 0 so the areas are invisible.
	 *
	 *  @default 0
	 */
	[Style(name="downFillAlpha", type="Number", format="Length", inherit="no")]

	public class Area extends UIComponent
	{
		public var href:String;
		public var label:String;
		public var coords:String;
		public var target:String;
		public var shape:String;
		
		//private var boundary:Rectangle;
		public var selected:Boolean = false;
		
		private var toggle:Boolean = false;
		//public var uiShape:UIComponent;
		
		private var _phase:String = AreaPhase.OUT;
		//private var textField:UITextField;
		
		/**
		 *  @private
		 */
		mx_internal var phaseChanged:Boolean = false;
		
		/**
		 *  @private
		 */
		mx_internal function get phase():String
		{
			return _phase;
		}
		
		/**
		 *  @private
		 */
		mx_internal function set phase(value:String):void
		{
			_phase = value;
			phaseChanged = true;

			//invalidateDisplayList();
		}
		
		/**
		 * @private
		 *
		 * We initialize the default styles for outline and fill styles by calling
		 * initStyles() when the component is instantiated.
		 */
		private static var stylesInitialised:Boolean = initStyles();
		
		/**
		 * @private
		 *
		 * The default styes are defined here.
		 */
		private static function initStyles():Boolean
		{
			/*var sd:CSSStyleDeclaration =
				StyleManager.getStyleDeclaration("Area");*/
			var sd:CSSStyleDeclaration =
				FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration('Area');
			if (!sd)
			{
				/*sd = new CSSStyleDeclaration();
				StyleManager.setStyleDeclaration("Area", sd, false);*/
				sd = new CSSStyleDeclaration();
				FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration('Area', sd, false);
			}
			
			sd.defaultFactory = function():void
			{
				this.outlineColor = 0x000000;
				this.outlineAlpha = 1;
				this.outlineThickness = 1;
				this.fillColor = 0x000000;
				this.fillAlpha = 1;
				
			}
			return true;
		}
		
		public function Area():void
		{
			super();
			super.mouseChildren = false;
		}
		/*override protected function createChildren():void
		{
			super.createChildren();
			
			textField = new UITextField();
			var textFormat:TextFormat = new TextFormat()
			textFormat.color = 0x000000;
			textFormat.size = 6;
			textFormat.bold = true;
			
			textField.setTextFormat(textFormat);
			
			textField.text = label;
			textField.width = 15;
			textField.height=15;
			this.addChild(textField);
		}*/
		
		/*
		* After we finish drawing we make sure that the areaHolder is on top of our loaded image.
		* If we don't have the call to setChildIndex then the shapes will all be under the image.
		*
		* We set the x and y scale of the areaHolder to match the content, since we might be
		* scaling the content to fit the size of this Image component. We also implement the clipping
		* of the shapes by using the content's scrollRect boundaries.
		*/
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
		
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			var sd:CSSStyleDeclaration;
			
			if (phase == AreaPhase.OUT)
			{
				var upStyleName:String = getStyle("upSkin");
				//var sd:CSSStyleDeclaration =
					//FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration('Area');
				//sd = StyleManager.getStyleDeclaration("." + upStyleName);
				sd = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("." + upStyleName);
			}
			else if ((phase == AreaPhase.UP))
			{
				if(toggle)
					selected = !selected;
				
				var upStyleName1:String = getStyle("overSkin");
				
				sd = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("." + upStyleName1);
				//sd = StyleManager.getStyleDeclaration("." + upStyleName);
				
			}
			else if ( phase == AreaPhase.OVER)
			{
				
				
				var upStyleName2:String = getStyle("overSkin");
				sd = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("." + upStyleName2);
				//sd = StyleManager.getStyleDeclaration("." + upStyleName);


			}
			else if (phase == AreaPhase.DOWN)
			{
				var upStyleName3:String = getStyle("downSkin");
				sd = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("." + upStyleName3);
				//sd = StyleManager.getStyleDeclaration("." + upStyleName);
			}
			if(selected)
			{
				var upStyleName4:String = getStyle("selectedSkin");
				sd = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("." + upStyleName4);
				//sd = StyleManager.getStyleDeclaration("." + upStyleName);
			}
			drawShape(sd);
			/*if(boundary)
			{
				textField.x = boundary.x + (( boundary.width)/2);
				textField.y = boundary.y + ((boundary.height)/2);
			}*/
		}
		
		public function drawShape(sd:CSSStyleDeclaration):void
		{
			var coords:Array = coords.split(",");
			
			var outlineThickness:Number = 1;
			var outlineColor:uint = sd.getStyle("outlineColor");
			var outlineAlpha:Number = sd.getStyle("outlineAlpha");
			var fillColor:uint = sd.getStyle("fillColor");
			var fillAlpha:Number = sd.getStyle("fillAlpha");
			
			var g:Graphics = this.graphics;
			g.clear();
			g.lineStyle(outlineThickness, outlineColor, outlineAlpha);
			g.beginFill(fillColor, fillAlpha);
			
			switch (shape.toLowerCase())
			{
				case "rect":
					g.drawRect(coords[0], coords[1], coords[2] - coords[0], coords[3] - coords[1]);
					break;
				case "poly":
					drawPoly(g, coords);
					break;
				case "circle":
					g.drawCircle(coords[0], coords[1], coords[2]);
					break;
			}
			
			g.endFill();
		}
		
		/**
		 * @private
		 * Simple utility function to draw a polygon from an array of points.
		 */
		private function drawPoly(g:Graphics, coords:Array):void
		{
			g.moveTo(coords[0], coords[1]);
			/*var xx:Number = coords[0];
			var yy:Number = coords[1];
			
			var mx:Number = coords[0];
			var my:Number = coords[1];*/
			
			//since we moved to the first point, we loop over all points starting on the second point	
			for (var i:int = 2; i < coords.length; i += 2)
			{
				/*if(xx > coords[i])
					xx = coords[i];
				
				if(yy > coords[i+ 1])
					yy = coords[i+ 1];
				
				if(mx < coords[i])
					mx = coords[i];
				
				if(my < coords[i+ 1])
					my = coords[i+ 1];*/
				
				g.lineTo(coords[i], coords[i + 1]);
			}
			//var rect:Rectangle = new Rectangle(xx,yy,mx-xx,my-yy);
			
			//got to remember to reconnect from the last point to the first point
			g.lineTo(coords[0], coords[1]);
			
			//return rect;
		}
	}
}